<template>
    <div class="row ant-bg">
        <div class="col-6">
            <el-form class="col-right container-fluid" label-width="0px" :model="formInline">
                <el-form-item class="row" :style="{ height: '42px' }">
                    <el-input class="input" clearable v-model.lazy="formInline.name" placeholder="输入课程名"></el-input>
                </el-form-item>
                <div class="row">
                    <div class="col-5">
                        <div :style="{ height: '42px', lineHeight: '42px' }">课程名称</div>
                        <div class=" list" v-for="v in tabledata" :key="v.ID"
                            :style="{ marginTop: '6px', marginBottom: '6px' }">
                            <div class="col text-truncate cu" @click="catebagid = Number(v.ID)"
                                :style="{ height: '42px', lineHeight: '42px', color: catebagid === v.ID ? 'var(--color-cheng)' : '' }">
                                {{ v.name
                                }}
                            </div>
                        </div>
                    </div>
                    <div class="col-7 ">
                        <div class=" list row" v-for="v in courses" :key="v?.ID"
                            :style="{ marginTop: '6px', marginBottom: '6px' }">

                            <div class="col text-truncate" :style="{ height: '42px', lineHeight: '42px' }"
                                :title="v.name">
                                {{ v?.name
                                }}
                            </div>
                            <a target="_blank"
                                :href="`https://www.hterobot.com/home.html#/course/${v?.ID}?lession=0&catebag=${catebagid}`"
                                class="router-link-q">
                                预览
                            </a>
                            <div class="text-center coursestyle">
                                <span class="cu coursestylespan" @click="addclick({ ...v, catebagid })">
                                    <el-icon color="#fff" size="18px" :style="{ transform: 'translateY(3px)' }">
                                        <Plus />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col text-right">
                        <el-pagination :page-size="limit" :total="count" @current-change="currentchange"
                            layout="prev, pager, next"
                            :current-page="Math.floor(Number(formInline._offset) / limit) + 1"></el-pagination>
                    </div>
                </div>
            </el-form>
        </div>
        <div class="col-6">

            <el-form class="col-right container-fluid" label-width="0px" :model="formInline">
                <div class="row" :style="{ height: '42px', lineHeight: '42px' }">
                    <div class="col">
                        <strong>已添加课程</strong>
                    </div>
                    <div class="col text-right">
                        <strong>
                            已添加：
                            <span :style="{ color: 'var(--color-cheng)' }">{{ questionid.length }}</span> 课程
                        </strong>
                    </div>
                </div>
                <div class="row">
                    <div :style="{ width: '80px', height: '42px', lineHeight: '42px' }">编号</div>
                    <div class="col" :style="{ height: '42px', lineHeight: '42px' }">名称</div>
                    <div :style="{ width: '80px', height: '42px', lineHeight: '42px' }">删除</div>
                </div>
                <hr :style="{ marginTop: '6px', marginBottom: '6px' }" />
                <draggable v-model="question" group="people" @start="drag = true" @end="drag = true" item-key="ID"
                    class="mydata" chosenClass="chosen">
                    <template #item="{ element, index }">

                        <div class="row" :style="{ marginTop: '6px', marginBottom: '6px' }">
                            <div :style="{ width: '80px', height: '42px', lineHeight: '42px' }">{{ element.ID
                                }}</div>
                            <div class="col text-truncate" :style="{ height: '42px', lineHeight: '42px' }">{{
                                element.name
                            }}
                            </div>
                            <div class="text-center" :style="{ width: '80px', height: '42px', lineHeight: '42px' }">
                                <span class="cu coursestylespan" @click="removeclick(index)">
                                    <el-icon color="#fff" size="18px" :style="{ transform: 'translateY(3px)' }">
                                        <semi-select />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </template>
                </draggable>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Plus, SemiSelect } from '@element-plus/icons-vue';
import { debounce } from 'underscore';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import draggable from "vuedraggable";
import { Iteamobj, asyncselectcatebags, asyncselectcourse } from '../../api';
import Alymodel from '../../mysql_interface/model';
const limit = 13

const tabledata = ref<Alymodel.IMcatebag[]>([])
const count = ref(0)

const p = defineProps<{ addclick: Function, teamid: number, questionid: Alymodel.IMcourse[], change?: Function, removeclick: (i: number) => void, }>()
type E = {
    (e: 'change:questionid', value?: Alymodel.IMcourse[]): void
    (event: 'update:questionid', id: Alymodel.IMcourse[]): void
}

const emit = defineEmits<E>()
const question = computed<Alymodel.IMcourse[]>({
    get() {
        return p.questionid
    },
    set(v) {
        if (p.change) {
            p.change(v)
        }
        emit('update:questionid', v)
    }
})

const formInline = reactive<Iteamobj<Alymodel.IMcatebag>>({
    teamid: p.teamid
})

const catebagid = ref(0)
const drag = ref(false)

const courses = ref<Alymodel.IMcourse[]>([])


watch(formInline, () => {
    debouncet1.value()
})

watch(() => catebagid.value, e => {
    if (e) {
        const data = tabledata.value.find(e => e.ID === catebagid.value)?.coursecatebag?.map(t => t.cid)
        asyncselectcourse({ teamid: p.teamid, ID: data, _limit: 1000 }).then(e => {
            courses.value = e.rows
        })

    }
})




function currentchange(r: number) {
    formInline._offset = (r - 1) * limit
}

const loading = ref(false)

const debouncet1 = ref(debouncet())
function debouncet() {
    return debounce(async () => {
        const { name, teamid, _offset } = formInline;
        const obj: Iteamobj<Alymodel.IMcatebag> = {
            _order: "ID",
            _offset,
            _limit: limit,
            teamid: teamid
        };
        let _like: [keyof Alymodel.IMcatebag, any]
        if (name) {
            _like = ["name", formInline.name];
            const id = Number(name);
            if (id == name) {
                _like = ["ID", id];
            }
            obj._like = _like;
        }

        loading.value = true;
        const data = await asyncselectcatebags(obj);
        tabledata.value = data.rows
        count.value = data.count
        catebagid.value = tabledata.value[0].ID || 0
        loading.value = false;
    }, 300);
}



onMounted(() => {
    debouncet1.value()
})
defineExpose({
    questions: p.questionid
})

</script>



<style scoped>
.container-fluid {
    padding: 0;
    height: 846px;
}


.mydata {
    height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}

.input {
    display: inline-block;
    width: 45%;
}

.col-center div {
    width: 90px;
}

.icon-class-var {
    display: none;
}

.list:hover {
    color: var(--color-cheng);
    background-color: #efefef;
}

.list:hover .icon-class-var {
    display: inline-block;
}


.ant-bg {
    background-color: var(--color-f5);
    border-radius: 4px;
    padding-left: 36px;
    padding-right: 36px;
    padding-bottom: 24px;
    padding-top: 24px;
}


.col-right {
    height: 924.99px;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
        0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
    border-radius: 4px;
    padding: 24px;
    /* margin-left: 6px; */
}

.mydata {
    height: 680px;
    overflow-y: auto;
    overflow-x: hidden;
}

.mydata::-webkit-scrollbar {
    width: 0px;
    height: 1px;
}

.mydata::-webkit-scrollbar-thumb {
    border-radius: 3px;
    box-shadow: inset 0 0 5px rgba(0, 0, 255, 0.3);
    background: #535353;
}

.mydata::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 255, 0.3);
    border-radius: 3px;
    background: #ededed;
}

.input {
    display: inline-block;
    width: 45%;
}

.container-fluid .row {
    margin-bottom: 12px;
}

.icon-class-var {
    display: none;
}

.list {
    padding-bottom: 6px;
}

.list:hover .icon-class-var {
    display: inline-block;
}

.coursestyle {
    width: 50px;
    padding: 0;
    height: 42px;
    line-height: 42px;
}

.col-7 {
    height: 780px;
    overflow-y: scroll;
}

.col-5 {
    height: 780px;
    border: 1px solid #eee;
}

.coursestylespan {
    width: 24px;
    height: 24px;
    background: var(--color-cheng);
    border-radius: 2px;
    display: inline-block;
    line-height: 24px;
}

.mydata .row {
    cursor: all-scroll;
}

.chosen {
    color: var(--color-cheng);
}
</style>